<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wzc">
        <button @click='diset'>销毁vm</button>
        <p v-show="isshow">wzc</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
                el: "#wzc",
                data: {
                    isshow: true,
                },
                //初始化阶段
                beforeCreate() {
                    console.log("beforeCreate()");
                },
                created() {
                    console.log("created()");
                },
                beforeMount() {
                    console.log("beforeMount()");
                },
                mounted() { //初始化显示之后立即调用（1次）
                    console.log("mounted()")
                    this.seti = setInterval(() => {
                        console.log(12345);
                        this.isshow = !this.isshow;
                    }, 1000)
                },
                //2.更新阶段
                beforeUpdate() {
                    console.log("beforeUpdate()");
                },
                updated() {
                    console.log("updated()");
                },
                //3.死亡阶段
                beforeDestroy() { //死亡之前调用（1次）
                    console.log("beforeDestroy()")
                        //清除定时器
                    clearInterval(this.seti);
                },
                destroyed() {
                    console.log("destroyed()")
                },
                methods: {
                    diset() {
                        //干掉vm
                        this.$destroy();
                    }
                },
            })
            /*
                常用方法：
                    1.mounted():发送ajax请求，启动定时器等异步任务
                    2.beforeDestory():做收尾工作，如：清除定时器
            */
    </script>
</body>

</html>